<script lang="ts" setup>
import align from '@/components/align.vue';
import centerAlign from '@/components/centerAlign.vue';
import flip from '@/components/flip.vue';

import clone from '@/components/clone.vue';
import hide from '@/components/hide.vue';
import group from '@/components/group.vue';
import lock from '@/components/lock.vue';
import dele from '@/components/del.vue';

import bgBar from '@/components/bgBar.vue';
import setSize from '@/components/setSize.vue';
import replaceImg from '@/components/replaceImg.vue';
import removeBackground from '@/components/removeBackground.vue';
// import maskImg from '@/components/maskImg.vue';
import filters from '@/components/filters.vue';
import imgStroke from '@/components/imgStroke.vue';
// import elementData from '@/components/elementData.vue';
// 右侧组件
// import attribute from '@/components/attribute.vue';
import attributePostion from '@/components/attributePostion.vue';
// import attributeId from '@/components/attributeId.vue';
import attributeShadow from '@/components/attributeShadow.vue';
import attributeBorder from '@/components/attributeBorder.vue';
import attributeRounded from '@/components/attributeRounded.vue';
import attributeFont from '@/components/attributeFont.vue';
import attributeTextFloat from '@/components/attributeTextFloat.vue';
import attributeColor from '@/components/attributeColor.vue';
import attributeBarcode from '@/components/attributeBarcode.vue';
import attributeQrCode from '@/components/attributeQrCode.vue';
import cropperImg from '@/components/cropperImg.vue';
import clipImage from '@/components/clipImage.vue';

import ImageClipPath from '../ImageClipPath/index.vue';
// hooks
import useSelectListen from '@/hooks/useSelectListen';

const canvasEditor = inject('canvasEditor');

const { mixinState } = useSelectListen(canvasEditor);

const attrBarShow = ref(true);
const state = reactive({
  clipVisible: false,
  rightVisible: false,
});

const handleClose = () => {
  state.clipVisible = false;
};

const handleRightClose = () => {
  state.rightVisible = false;
};
</script>

<template>
  <div
    class="right-btn"
    v-if="!state.rightVisible"
    @click="state.rightVisible = !state.rightVisible"
  >
    <Icon class="right-center-icon" type="ios-settings" size="30" />
  </div>
  <div class="right-box" v-if="state.rightVisible">
    <div class="right-title">
      属性面板
      <Icon class="right-icon" type="md-close" size="20" @click="handleRightClose" />
    </div>
    <!-- 属性区域 380-->
    <div class="right-bar" v-show="attrBarShow">
      <div style="padding-top: 10px">
        <!-- 未选择元素时 展示背景设置 -->
        <div v-show="!mixinState.mSelectMode">
          <set-size></set-size>
          <bg-bar></bg-bar>
        </div>

        <!-- 多选时展示 -->
        <div v-show="mixinState.mSelectMode === 'multiple'">
          <!-- 分组 -->
          <group></group>
          <!-- <Divider plain></Divider> -->
          <!-- 组对齐方式 -->
          <align></align>
          <!-- 居中对齐 -->
          <center-align></center-align>
        </div>

        <div v-show="mixinState.mSelectMode === 'one'" class="attr-item-box">
          <!-- <h3>快捷操作</h3> -->
          <!-- 分组 -->
          <group></group>
          <!-- <Divider plain></Divider> -->
          <div class="bg-item" v-show="mixinState.mSelectMode">
            <lock></lock>
            <dele></dele>
            <clone></clone>
            <hide></hide>
            <edit></edit>
          </div>
          <!-- <Divider plain></Divider> -->
          <!-- 居中对齐 -->
          <center-align></center-align>
          <!-- 蒙版 -->
          <!-- <maskImg></maskImg> -->
          <!-- 扣人像 -->
          <removeBackground></removeBackground>
          <!-- 替换图片 -->
          <replaceImg></replaceImg>
          <!-- 裁剪 -->
          <cropperImg></cropperImg>
          <!-- 图片裁切 -->
          <clipImage @click="state.clipVisible = !state.clipVisible"></clipImage>
          <!-- 翻转 -->
          <flip></flip>
          <!-- 条形码属性 -->
          <attributeBarcode></attributeBarcode>
          <!-- 二维码 -->
          <attributeQrCode></attributeQrCode>
          <!-- 图片滤镜 -->
          <filters></filters>
          <!-- 图片描边 -->
          <imgStroke />
          <!-- 颜色 -->
          <attributeColor></attributeColor>
          <!-- 字体属性 -->
          <attributeFont></attributeFont>
          <!-- 字体小数点 -->
          <attributeTextFloat></attributeTextFloat>
          <!-- 文字内容  -->
          <attribute-text-content></attribute-text-content>
          <!-- 位置信息 -->
          <attributePostion></attributePostion>
          <!-- 阴影 -->
          <attributeShadow></attributeShadow>
          <!-- 边框 -->
          <attributeBorder></attributeBorder>
          <!-- 圆角 -->
          <attributeRounded></attributeRounded>
          <!-- 关联数据 -->
          <!-- <attributeId></attributeId> -->

          <!-- 新增字体样式使用 -->
          <!-- <Button @click="canvasEditor.getFontJson()" size="small">获取元素数据</Button> -->
        </div>
      </div>
      <!-- <attribute v-if="state.show"></attribute> -->
    </div>

    <ImageClipPath :visible="state.clipVisible" @handle-close="handleClose" />
  </div>
</template>

<style lang="less" scoped>
.right-btn {
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;

  .right-center-icon {
    color: var(--primary-color);
  }
}
.right-box {
  padding: 8px 10px;
  width: 300px;
  position: relative;
  overflow: hidden;

  .right-title {
    font-size: 12px;
    color: #999;
    margin: 6px 0;
    padding: 0 6px;
    display: flex;
    justify-content: space-between;

    .right-icon {
      color: var(--primary-color);
      cursor: pointer;

      &:hover {
        color: var(--primary-color-hover);
      }
    }
  }

  .right-bar {
    height: calc(100vh - 180px);
    overflow: auto;
  }
}
</style>
